<template>
  <div>
    <TabNav></TabNav>
    <ListContainer></ListContainer>
    <RecommendIndex></RecommendIndex>
    <RankIndex></RankIndex>
    <LikeIndex></LikeIndex>
    <FloorIndex :list="floor" v-for="floor in floorList" :key="floor.id"></FloorIndex>
    <BrandIndex></BrandIndex>
  </div>
</template>

<script>
import ListContainer from '@/views/Home/ListContainer'
import RecommendIndex from '@/views/Home/Recommend'
import RankIndex from '@/views/Home/Rank'
import LikeIndex from '@/views/Home/Like'
import FloorIndex from '@/views/Home/Floor'
import BrandIndex from '@/views/Home/Brand'
import { mapState } from 'vuex'
export default {
  name: 'HomeIndex',
  components: {
    ListContainer,
    RecommendIndex,
    RankIndex,
    LikeIndex,
    FloorIndex,
    BrandIndex
  },
  async mounted(){
    await this.$store.dispatch('home/getFloorList')
  },
  computed:{
    ...mapState('home',['floorList'])
  }
}
</script>

<style></style>